<html>

    <head>
        <meta charset="utf-8">
        <title>3D立方体</title>
        
        <style>
            body{
                height: 100%;
                background-color: black;
                display: flex;

                justify-content: center;
                align-items: center;
                
                perspective: 1000px;
            }

            main{
                height: 200px;
                width: 200px;

                transform: perspective(1000px);
                transform-style: preserve-3d;

                animation-name: spin;
                animation-duration: 15s;
                animation-timing-function: linear;
                animation-iteration-count: infinite;
                
            }

            section, div{
                transform: perspective(1000px);
                transform-style: preserve-3d;
            }

            
            section img{
                height: 150px;
                width: 150px;
                position: absolute;
            }


            div img{
                height: 200px;
                width: 200px;
                position: absolute;
            }

            div #top{
                transform: translateY(-200px) rotateX(90deg);
            }
            
            div #bottom{
                transform: translateY(200px) rotateX(90deg);
            }

            div #front{
                transform: translateZ(200px) ;
            }

            div #back{
                transform: translateZ(-200px) ;
            }

            div #left{
                transform: translateX(-200px) rotateY(90deg);
            }

            div #right{
                transform: translateX(200px) rotateY(90deg);
            }

            @keyframes spin{
                0%{
                    transform: rotateY(0) rotateX(0);
                }
                100%{
                    transform: rotateY(360deg) rotateX(360deg);
                }
            }
           

           section #top{
                /*transform：变形， rotate：旋转， scale：缩放*/
                /*原点 0，0 在左上角，沿 X,Y轴越来越大
                沿 Y 轴 向上平移150px，沿 X 轴 旋转90 度*/
                transform: translateY(-75px) rotateX(90deg);
            }

            section #bottom{
                transform: translateY(75px) rotateX(90deg);
            }

            section #left{
                transform: translateX(-75px) rotateY(90deg);
            }

            section #right{
                transform: translateX(75px) rotateY(90deg);
            }

            section #front{
                transform: translateZ(75px);
            }

            section #back{
                transform: translateZ(-75px);
            }


          
        </style>
        
    </head>

    <body>

        <main>
            <div>
                <img src="7.jpg" alt="" id="top">
                <img src="8.jpg" alt="" id="bottom">
                <img src="9.jpg" alt="" id="left">
                <img src="10.jpg" alt="" id="right">
                <img src="11.jpg" alt="" id="front">
                <img src="12.jpg" alt="" id="back">
            </div>
            <section>
                <img src="1.jpg" alt="" id="top">
                <img src="2.jpg" alt="" id="bottom">
                <img src="3.jpg" alt="" id="left">
                <img src="4.jpg" alt="" id="right">
                <img src="5.jpg" alt="" id="front">
                <img src="6.jpg" alt="" id="back">
            </section>

        </main>

        
        
    </body>

</html>